<template>
  <div class="content-inner-box"
       :style="{
          width: width===0 ? 'calc(100%)' : width + 'px',
          height: !isExpanded ? 40 + 'px' : height===0?`calc(100vh - ${marginHeight}px)`: height+'px',
          padding: padding+'px'
  }">
    <div :class="borderStyle()">
      <div class="lt b"></div>
      <div class="rt b"></div>
      <div class="rb b"></div>
      <div class="lb b"></div>
      <div class="content-inner-box-tBox">
        <div class="content-inner-box-title" :style="{
          display: (title && detailTitle) ? 'block' : 'none',
          cursor: 'pointer'
        }">
          <span @click="togger($event)">
            <span v-if="isOpenExpand" style="color: #222222; font-size: 16px;">
              <el-icon>
                <CaretRight v-if="!isExpanded"/>
                <CaretBottom v-else/>
              </el-icon>
           </span>
          {{ title }}
          </span>
          <slot name="titleRight"></slot>
        </div>
        <span class="content-inner-box-rightDetail">
          <a v-show="isDetail" class="detailBtn" @click="detailHandle"
             href="javascript: void(0);">
                      {{ detailTitle }}
            <!--            <i class="el-icon-more"></i>-->
                    </a>
          <slot name="right"></slot>
        </span>
      </div>
      <transition name="content-toggle">
        <div v-if="isExpanded" class="content-inner-box-body" :style="{
          height: !isExpanded ? 40 + 'px' :  height===0?`calc(100vh - ${marginHeight}px)`: height+'px',
          overflowY,
          overflowX
      }">
          <slot name="center"></slot>
        </div>
      </transition>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {CaretBottom, CaretRight} from "@element-plus/icons-vue";

const emit = defineEmits(['clickA'])
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  width: {
    type: Number,
    default: 0,
  },
  height: {
    type: Number,
    default: 0,
  },
  marginHeight: {
    type: Number,
    default: 140,
  },
  isDetail: {
    type: Boolean,
    default: false,
  },
  detailTitle: {
    type: String,
    default: '查看更多'
  },
  border: {
    type: Number,
    default: 1,
  },
  padding: {
    type: Number,
    default: 10,
  },
  overflowY: {
    type: String,
    default: 'hidden',
  },
  overflowX: {
    type: String,
    default: 'hidden',
  },
  isOpenExpand: {
    type: Boolean,
    default: () => {
      return false;
    },
  }
})

const isExpanded = ref(true)

const togger = (event) => {
  if (!props.isOpenExpand) {
    return false
  }
  isExpanded.value = !isExpanded.value
}

const borderStyle = () => {
  let str = 'content-inner-box-bg'
  return str + props.border
}

const detailHandle = () => {
  emit('clickA')
}
</script>

<style lang="scss">
@import "@/assets/var";
.content-inner-box {
  position: relative;
  //padding: 0.2rem;
  //border-radius: 10px;

  //background: #fff;
  //backdrop-filter: blur(50px);
  display: inline-block;
  vertical-align: top;


  &::before {
    content: unset;
  }

  //@supports (background: -moz-element(#bg)) {
  //  & {
  //    background: rgba(75, 108, 183, 0.95);
  //  }
  //}

  &-bg1 {
    width: 100%;
    background: linear-gradient(#00faff, #00faff) left top,
    linear-gradient(#00faff, #00faff) left top,
    linear-gradient(#00faff, #00faff) right top,
    linear-gradient(#00faff, #00faff) right top,
    linear-gradient(#00faff, #00faff) left bottom,
    linear-gradient(#00faff, #00faff) left bottom,
    linear-gradient(#00faff, #00faff) right bottom,
    linear-gradient(#00faff, #00faff) right bottom;
    background-repeat: no-repeat;
    background-size: 3px 15px, 15px 3px;

    & > div.b {
      display: none;

    }
  }

  &-bg2 {
    position: absolute;
    width: 100%;
    border: 1px solid $--content-box-color;


    & > div.b {
      width: 10px;
      height: 10px;
      position: absolute;
    }

    .lt {
      border-top: 3px solid $--content-box-color;
      border-left: 3px solid $--content-box-color;
      left: -3px;
      top: -3px;
    }

    .rt {
      border-top: 3px solid $--content-box-color;
      border-right: 3px solid $--content-box-color;
      right: -3px;
      top: -3px;
    }

    .rb {
      border-bottom: 3px solid $--content-box-color;
      border-right: 3px solid $--content-box-color;
      right: -3px;
      bottom: -3px;
    }

    .lb {
      border-bottom: 3px solid $--content-box-color;
      border-left: 3px solid $--content-box-color;
      left: -3px;
      bottom: -3px;
    }
  }

  &-bg3 {
    width: 100%;

    & > div.b {
      display: none;

    }
  }

  &-title {
    padding: $--content-box-title-margin;
    text-align: left;
    display: block;
    width: 100%;
    height: $--content-box-title-height;
    line-height: $--content-box-title-height;
    font-size: $--content-box-title-size;
    font-weight: bold;
    color: $--content-box-color;
  }

  &-rightDetail {
    position: absolute;
    top: 16px;
    right: 38px;
    cursor: pointer;

    .detailBtn {
      cursor: pointer;
      font-size: $--content-box-btn-size;
      color: $--content-box-color;
    }
  }

  &-body {
    padding-bottom: 10px;
    overflow: hidden;
    border-radius: 0.125rem;
    color: #ffffffe6;
  }
}

/* 定义过渡动画 */
.content-toggle-enter-active, .content-toggle-leave-active {
  transition: all 0.3s ease; /* 定义过渡效果 */
  max-height: 1000px; /* 设置一个足够大的 max-height */
  overflow: hidden;
}

.content-toggle-enter-from, .content-toggle-leave-to {
  max-height: 0; /* 初始和结束状态的高度 */
  opacity: 0; /* 可选：添加淡入淡出效果 */
}
</style>

